import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Form, Input, Button, Card, Typography, message } from 'antd';
import { UserOutlined, LockOutlined, EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import './LoginAnimations.css';

const { Title, Text } = Typography;

// 科技风背景动画组件
const TechBackground = () => {
  // 生成科技风光点
  const techDots = Array.from({ length: 20 }, (_, i) => (
    <div
      key={`dot-${i}`}
      className="tech-dot"
      style={{
        left: `${Math.random() * 100}%`,
        top: `${Math.random() * 100}%`,
        animationDelay: `${Math.random() * 2}s`,
      }}
    />
  ));

  // 生成流动线条
  const flowLines = Array.from({ length: 8 }, (_, i) => (
    <div
      key={`line-${i}`}
      className="flow-line"
      style={{
        left: `${Math.random() * 100}%`,
        top: `${Math.random() * 100}%`,
        animationDelay: `${Math.random() * 4}s`,
        transform: `rotate(${Math.random() * 360}deg)`,
      }}
    />
  ));

  // 生成粒子效果
  const particles = Array.from({ length: 15 }, (_, i) => (
    <div
      key={`particle-${i}`}
      className="particle"
      style={{
        left: `${Math.random() * 100}%`,
        animationDelay: `${Math.random() * 8}s`,
        animationDuration: `${6 + Math.random() * 4}s`,
      }}
    />
  ));

  return (
    <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', overflow: 'hidden' }}>
      {/* 主背景渐变 */}
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          background: 'radial-gradient(ellipse at center, #0a1930 0%, #000510 100%)',
          zIndex: 0,
        }}
      />

      {/* 网格背景 */}
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          backgroundImage: `
            linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px)
          `,
          backgroundSize: '50px 50px',
          animation: 'gridMove 20s linear infinite',
          zIndex: 1,
        }}
      />

      {/* 科技风光点 */}
      {techDots}

      {/* 流动线条 */}
      {flowLines}

      {/* 粒子效果 */}
      {particles}

      {/* 扫描线 */}
      <div className="scan-line" style={{ animationDelay: '0s' }} />
      <div className="scan-line" style={{ animationDelay: '3s', left: '50%' }} />

      {/* 边缘光晕效果 */}
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          background: `
            radial-gradient(circle at 20% 20%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(102, 0, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 40% 90%, rgba(0, 153, 255, 0.1) 0%, transparent 50%)
          `,
          zIndex: 2,
        }}
      />
    </div>
  );
};

const Login = () => {
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();
  const [form] = Form.useForm();

  // 模拟登录数据
  const mockUsers = [
    { username: 'admin', password: '123456', role: 'admin' },
    { username: 'user', password: '123456', role: 'user' }
  ];

  const handleLogin = async (values) => {
    setLoading(true);

    try {
      // 模拟API调用延迟
      await new Promise(resolve => setTimeout(resolve, 1000));

      const user = mockUsers.find(
        u => u.username === values.username && u.password === values.password
      );

      if (user) {
        // 登录成功，保存用户信息到localStorage
        localStorage.setItem('user', JSON.stringify(user));
        localStorage.setItem('isLoggedIn', 'true');
        message.success('登录成功！');
        navigate('/dashboard');
      } else {
        message.error('用户名或密码错误');
      }
    } catch (error) {
      message.error('登录失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{
      position: 'relative',
      minHeight: '100vh',
      background: '#000510',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '48px 16px',
      overflow: 'hidden'
    }}>
      {/* 科技风背景 */}
      <TechBackground />

      <div style={{
        position: 'relative',
        width: '100%',
        maxWidth: '400px',
        zIndex: 10
      }}>
        <Card
          className="login-card"
          style={{
            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
            borderRadius: '16px'
          }}
        >
          <div style={{ textAlign: 'center', marginBottom: '32px' }}>
            <div style={{
              margin: '0 auto 16px',
              width: '64px',
              height: '64px',
              backgroundColor: 'rgba(0, 255, 255, 0.1)',
              borderRadius: '50%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              boxShadow: '0 0 30px rgba(0, 255, 255, 0.3)',
              border: '2px solid rgba(0, 255, 255, 0.3)'
            }}>
              <UserOutlined className="login-icon" style={{ fontSize: '32px' }} />
            </div>
            <Title level={2} className="tech-title" style={{ marginBottom: '8px' }}>系统登录</Title>
            <Text className="tech-subtitle">请验证您的身份信息</Text>
          </div>

          <Form
            form={form}
            name="login"
            onFinish={handleLogin}
            autoComplete="off"
            layout="vertical"
            size="large"
          >
            <Form.Item
              label="用户名"
              name="username"
              rules={[
                {
                  required: true,
                  message: '请输入用户名!',
                },
              ]}
            >
              <Input
                className="login-input"
                prefix={<UserOutlined className="login-icon" />}
                placeholder="请输入用户名"
                style={{ borderRadius: '8px' }}
              />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: '请输入密码!',
                },
              ]}
            >
              <Input.Password
                className="login-input"
                prefix={<LockOutlined className="login-icon" />}
                placeholder="请输入密码"
                style={{ borderRadius: '8px' }}
                iconRender={(visible) => (visible ? <EyeTwoTone twoToneColor="#00ffff" /> : <EyeInvisibleOutlined style={{ color: '#00ffff' }} />)}
              />
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                loading={loading}
                className="login-button"
                style={{
                  width: '100%',
                  height: '48px',
                  borderRadius: '8px',
                  fontSize: '16px',
                  fontWeight: '500',
                  background: 'linear-gradient(135deg, #0a1930 0%, #1a2f47 50%, #0a1930 100%)',
                  color: '#00ffff',
                  textShadow: '0 0 10px rgba(0, 255, 255, 0.5)'
                }}
              >
                {loading ? '验证中...' : '登录系统'}
              </Button>
            </Form.Item>

            <div style={{ textAlign: 'center' }}>
              <Text style={{ fontSize: '12px', color: 'rgba(0, 255, 255, 0.6)' }}>
                测试账号：admin / 密码：123456
              </Text>
            </div>
          </Form>
        </Card>
      </div>
    </div>
  );
};

export default Login; 